<template>
  <div class="directory" :class="sideTheme">
    <p class="directory-title">
      <stream class="directory-icon" />
      目录
    </p>
    <div class="directory-item">
      <p
        v-for="(item, index) in list"
        :title="item"
        :key="index"
        :class="index == actionIndex ? 'action item' : 'item'"
        @click="toBack(index)"
      >
        {{ item }}
      </p>
    </div>
  </div>
</template>

<script setup name="Directory">
import anime from 'animejs';
import { Stream } from '@vicons/fa';
import { useSettingsStore } from '@/store';
import { computed, onMounted, watch } from 'vue';
import { useUserStore } from '@/store';
const store = useUserStore();

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);

const Prop = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});

let offsetTop = ref([]);
let actionIndex = ref(0);

const scrollTop = computed(() => store.scrollTop);
watch(scrollTop, (value) => {
  offsetTop.value.forEach((J, index) => {
    if (J + 320 <= value) {
      actionIndex.value = index;
    }
  });
});

const init = () => {
  let noteItem = document.getElementsByClassName('note-left')[0].children;
  Array(...noteItem)
    .filter((J) => J.id == 'note-item')
    .forEach((J) => {
      offsetTop.value.push(J.offsetTop);
    });
};

const toBack = (index) => {
  let app = document.documentElement;
  anime({
    targets: app,
    scrollTop: offsetTop.value[index] + 320,
    easing: 'easeInCubic',
    duration: 500,
  });
};

onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
.directory {
  box-sizing: border-box;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
  .directory-title {
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 18px;
    color: #4c4948;
    .directory-icon {
      width: 18px;
      height: 18px;
      margin-bottom: -2px;
    }
  }
  .directory-item {
    p {
      font-size: 15px;
      color: #666261;
      margin: 5px 0;
      padding: 0 5px;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .item:hover {
      color: #49b1f5;
      cursor: url('../../../assets/cur/x2.cur'), default !important;
    }
  }
}
.action {
  background: #00c4b6;
  color: #fff !important;
}

.theme-dark {
  background: rgba(0, 0, 0, 0.5) !important;
  p {
    color: #ffffffb3 !important;
  }
}
</style>
